<template>
  <div class="Songlistreview">
    <div class="main">
      <el-input type="text" placeholder="" v-model="text" maxlength="140" show-word-limit style="width:1300px">
      </el-input>
      <div class="pinglun">
        <span>评论</span>
      </div>
      <div class="Commentlist">
        <div class="Wonderful">
          <p>精彩评论</p>
          <div class="comments" v-for="(item,index) in hotComments" :key="item.commentId">
            <img :src="item.user.avatarUrl" alt="">
            <div class="information">
              <div style="display:flex;">
                <span class="span1">{{item.user.nickname}}:</span>
                <p class="span2">{{item.content}}</p>
              </div>
              <div style="display:flex;margin-top: 5px;">
                <span class="span3" v-for="(item1,index1) in time" :key="index1" v-show="index==index1">{{item1}}</span>
                <div style="margin-left: 1000px;display: flex;align-items: center;">
                  <span class="span4">举报</span>
                  <i class="iconfont icon-dianzan i1">{{item.likedCount}}&nbsp;&nbsp;&nbsp;</i>
                  <i class="iconfont icon-fenxiang i2">&nbsp;&nbsp;&nbsp;</i>
                  <i class="iconfont icon-pinglun i3"></i>
                </div>
              </div>

            </div>
          </div>
        </div>
        <div class="Wonderful p">
          <p>最新评论({{playlist1.commentCount}})</p>
          <div class="comments" v-for="(item,index) in comments" :key="item.commentId">
            <img :src="item.user.avatarUrl" alt="">
            <div class="information">
              <div style="display:flex;">
                <span class="span1">{{item.user.nickname}}:</span>
                <p class="span2">{{item.content}}</p>
              </div>
              <div style="display:flex;margin-top: 5px;">
                <span class="span3" v-for="(item1,index1) in time1" :key="index1" v-show="index==index1">{{item1}}</span>
                <div style="margin-left: 1000px;display: flex;align-items: center;">
                  <span class="span4">举报</span>
                  <i class="iconfont icon-dianzan i1">{{item.likedCount}}&nbsp;&nbsp;&nbsp;</i>
                  <i class="iconfont icon-fenxiang i2">&nbsp;&nbsp;&nbsp;</i>
                  <i class="iconfont icon-pinglun i3"></i>
                </div>
              </div>

            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'Songlistreview',
  data() {
    return {
      text: '',
      textarea: '',
      limit: 100,
      offset: 0,
      time: [],
      time1: [],
      beReplied: []
    }
  },
  computed: {
    ...mapState({
      hotComments: state => state.playlist.commentsandhotComments.hotComments,
      comments: state => state.playlist.commentsandhotComments.comments,
      playlist1: state => state.playlist.playlist1
    })
  },
  mounted() {
    this.$store.dispatch('getSonglistreview', { id: this.$route.query.id, limit: this.limit, offset: this.offset })
  },
  watch: {
    hotComments: {
      handler(v, o) {
        this.time = v.map(val => {
          let d = new Date(val.time)
          let f = d.getFullYear() + '年'
          let a = d.getDate() + '月'
          let m = d.getMonth() + '日'
          if (d.getHours() < 10) {
            var h = '0' + d.getHours() + ':'
          } else {
            var h = d.getHours() + ':'
          }
          if (d.getMinutes() < 10) {
            var t = '0' + d.getMinutes()
          } else {
            var t = d.getMinutes()
          }
          return f + a + m + h + t
        })
      }
    },
    comments: {
      handler(v, o) {
        this.time1 = v.map(val => {
          let d = new Date(val.time)
          let f = d.getFullYear() + '年'
          let a = d.getDate() + '月'
          let m = d.getMonth() + '日'
          if (d.getHours() < 10) {
            var c = '0' + d.getHours() + ':'
          } else {
            var c = d.getHours() + ':'
          }
          if (d.getMinutes() < 10) {
            var r = '0' + d.getMinutes()
          } else {
            var r = d.getMinutes()
          }
          return f + a + m + c + r
        })
        this.beReplied = v.map(val => {
          return val.beReplied
        })
      }
    }
  }
}
</script>

<style lang="less" scoped>
.Songlistreview {
  overflow: hidden;
  .main {
    .pinglun {
      width: 60px;
      border: 1px solid #c4c4c4;
      border-radius: 25px;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 3px 0px;
      margin-left: 1250px;
      margin-top: 5px;
      span {
      }
    }
    .pinglun:hover {
      cursor: pointer;
      background-color: #f1eeee;
    }
    .Commentlist {
      .Wonderful {
        p {
          font-size: 15px;
          font-weight: 800;
        }
        .comments {
          display: flex;
          margin-top: 15px;
          padding-bottom: 15px;
          border-bottom: 1px solid #f1efef;
          img {
            width: 40px;
            height: 40px;
            border-radius: 50px;
          }
          img:hover {
            cursor: pointer;
          }
          .information {
            margin-left: 10px;
            .span1 {
              font-size: 8px;
              color: rgb(72, 19, 244);
              opacity: 0.7;
            }
            .span1:hover {
              opacity: 1;
              cursor: pointer;
            }
            .span2 {
              margin-left: 5px;
              width: 1200px;
              word-wrap: break-word;
              font-size: 8px;
              opacity: 0.7;
            }
            .span3 {
              font-size: 8px;
              opacity: 0.5;
            }
            .span4 {
              font-size: 10px;
              margin-right: 10px;
              opacity: 0.6;
            }
            .span4:hover {
              cursor: pointer;
              opacity: 1;
            }
            .i1 {
              font-size: 8px;
              opacity: 0.5;
            }
            .i1:hover {
              cursor: pointer;
              opacity: 0.8;
            }
            .i2 {
              font-size: 8px;
              opacity: 0.5;
            }
            .i2:hover {
              cursor: pointer;
              opacity: 0.8;
            }
            .i3 {
              font-size: 8px;
              opacity: 0.5;
            }
            .i3:hover {
              cursor: pointer;
              opacity: 0.8;
            }
          }
        }
      }
      .p {
        margin-top: 30px;
      }
    }
  }
}
</style>